{extend name="pub/base" /}
{block name="head"}
<title>章节管理-{$site_name}</title>
<style>
    /** 数据表格中的select尺寸调整 */
    .layui-table-view .layui-table-cell .layui-select-title .layui-input {
        height: 28px;
        line-height: 28px;
    }

    .layui-table-view [lay-size="lg"] .layui-table-cell .layui-select-title .layui-input {
        height: 40px;
        line-height: 40px;
    }

    .layui-table-view [lay-size="lg"] .layui-table-cell .layui-select-title .layui-input {
        height: 40px;
        line-height: 40px;
    }

    .layui-table-view [lay-size="sm"] .layui-table-cell .layui-select-title .layui-input {
        height: 20px;
        line-height: 20px;
    }

    .layui-table-view [lay-size="sm"] .layui-table-cell .layui-btn-xs {
        height: 18px;
        line-height: 18px;
    }
</style>
{/block}
{block name="main"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 数据表格 -->
            <table id="tbBasicTable" lay-filter="tbBasicTable"></table>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            表格中的select下拉框、dropdown下拉按钮等都不需要自己对表格做任何处理就可以完美的显示，
            因为easyweb提供了fixed定位方式的select和dropdown。
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tbBasicTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="picture">图片管理</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

{/block}
{block name="js"}
<script>
    layui.use(['layer', 'table',  'dropdown', 'admin', 'index', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var index = layui.index;
        var dropdown = layui.dropdown;
        var upload = layui.upload;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#tbBasicTable',
            url: '{:adminurl("chapters/getlist")}?book_id=' + {$book_id},
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button id="file-btn-upload" lay-event="upload" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>上传</button>&nbsp;',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {field: 'chapter_order', title: '章节序', align: 'center', sort: true},
                {field: 'chapter_name', title: '章节名', align: 'center', sort: true},
                {field: 'count', title: '图片数', align: 'center', sort: true},
                {field: 'create_time', title: '创建时间', align: 'center', sort: true},
                {field: 'update_time', title: '创建时间', align: 'center', sort: true},
                {title: '操作', toolbar: '#tbBasicTbBar', align: 'center', minWidth: 200}
            ]]
        });

        /* 表格工具条点击事件 */
        table.on('tool(tbBasicTable)', function (obj) {
            var data = obj.data; // 获得当前行数据
            if (obj.event === 'edit') { // 修改
                admin.open({
                    title: '章节编辑',
                    url: '{:adminurl("chapters/edit")}?id' + data.id,
                    end: function () {
                        insTb.reload()
                    }
                });
            } else if (obj.event === 'del') { // 删除
                del(obj, data.id)
            } else if (obj.event === 'picture') {
                index.openTab({
                    title: '图片管理',
                    url: '{:adminurl("picture/list")}?chapter_id=' + data.id,
                    end: function () {
                        insTb.reload()
                    }
                })
            }
            dropdown.hideAll();
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(tbBasicTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                admin.open({
                    title: '添加章节',
                    url:'{:adminurl("chapters/create")}?book_id=' + {$book_id},
                    end: function() {
                        insTb.reload()
                    }
                })
            } else if (obj.event === 'upload') {
                admin.open({
                    title: '添加章节',
                    url:'{:adminurl("upload")}?book_id=' + {$book_id},
                    end: function() {
                        insTb.reload()
                    }
                })
            }
        });
    });
</script>
{/block}
